<template>
  <div class="category">
    <!-- //侧边导航栏 -->
    <div class="category_nav" >
    <van-sidebar van-sidebar v-model="active" >
      <van-sidebar-item  :title="item.name" v-for="item in ceteListData" :key="item.id"    @click="navonChange(item.id)"/>
    </van-sidebar>
    </div>
    <div class="category_list"  >
        <div class="banner">
            <img src="./imgs/761877bc4e2cf50d7c424a8a7e6378bf.jpeg" alt="" srcset="">
        </div>
        <div class="cateList">
            <ul class="list">
              <li class="list_item"   v-for="item in currntId" :key="item.id" @click="itemChange(item.id)">
                <div class="list_item_div">
                    <div class="list_item_img">
                      <img :src="item.wapBannerUrl" alt="">
                    </div>
                    <div class="list_item_name">{{item.name}}</div>
                </div>
              </li>
            </ul>
        </div>
    </div>
  </div>

</template>

<script >
import Category_list from './Category_list/index.vue'
  export default {
    name:'Category',
  //   components: {
  //     Category_list
  //  },
  }
</script>
<script setup>
  import{reqceteList,reqceteitem} from '../../api/category/category'
  import{ref,onMounted, computed,defineComponent,} from 'vue'
  import { showToast } from 'vant';
  import { useRouter ,useRoute} from 'vue-router'
  const active = ref(0);
  const ceteListData = ref([])
  const currntId = ref([])
  const $router = useRouter();
  let id1 = ref(0)
  //侧边导航栏数据储存
  const navonChange=async(id)=>{
    // showToast(`标签名 ${index + 1}`)
    // currntIndex.id = id
    // currntIndex = index;
    // console.log("bb",currntIndex);
    //2,获取导航栏信息
      
        const resultid = await reqceteitem(id)
          
        currntId.value = resultid.categoryL2List.slice(0,10)
        
        id1 = id
        console.log("dd",id1);
  }
  const itemChange = (id)=>{
      console.log("ee",id);
      $router.push({ 
        path:'/category_list',
        query: {
						id1,
            id2:id
            
					},  
      })
  }
  //1.获取导航栏
  const reqceteListData =async ()=>{
    const result = await reqceteList(1,5)
    console.log('aaa',result.categoryL1List)
    ceteListData.value= result.categoryL1List
    // console.log(ceteListData);
  }

  //2.当页面组件挂载完毕
  onMounted(()=>{
    reqceteListData()
    
  })

</script>
<style lang="less" scoped>
.category{
  width: 100%;
  height: 574px;
  // overflow: auto;
  display: flex;
  // flex-wrap: wrap;
}
.category .category_nav{

  // height: 100%;
  // width: 1.62rem;
  background: #fff;
  transform:translateY(0px) ;
}
.category .category_list {
  padding: 0.3rem 0.3rem 0.21rem
}
//右上
.category .category_list .banner{
  width: 100%;
  // padding: 0.3rem 0.3rem 0.21rem
}
.category .category_list .banner img{
  width: 100%;
  // padding: 0.3rem 0.3rem 0.21rem
}
//右边数据下图片
.category .category_list .cateList .list .list_item{

  margin-right: 0.34rem;
  width: 2rem;
  font-size: 0;
  float:left
}
.category .category_list .cateList .list .list_item .list_item_img{
  height: 2rem;
  width: 2rem;
  margin-top: 0.2rem;
}

.category .category_list .cateList .list .list_item .list_item_img img{
  width: 100%;
  height: 100%;
}
.category .category_list .cateList .list .list_item .list_item_name{
  height: 0.72rem;
  font-size: .24rem;
  color: #333;
  text-align: center;
  line-height: .36rem;
  margin-top:3px ;
}

</style>>